<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="closeDlg"
    :close-on-click-modal="false"
    destroy-on-close="true"
    :width="width"
  >
    <div :style="'width: 100%; height: ' + height + ';'" class="scrollbar">
      <el-scrollbar style="height: 100%;">
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <!--    列表内容-->
          <el-table-column label="任务定义测量指标" width="" align="" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.taskDefineIndicator_name }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.actions')" align="" width="50" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <img
                @click="handleDelete(row)"
                title="删除"
                :src="listIcon.delete"
                alt=""
                class="listIcon"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <!--    分页-->
<!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageNumber" @pagination="getUserList" />-->

    <br><br>
    <span class="el-dialog__title">添加任务定义测量指标</span>
    <div style="width: 100%; height: 120px; padding-top: 20px; margin-top: 30px; border: 1px solid #dfe6ec" class="scrollbar">
      <el-scrollbar style="height: 100%;">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="margin-left:0px;">
          <el-form-item label="任务定义测量指标" prop="taskDefineIndicatorID">
            <el-select
              v-model="temp.taskDefineIndicatorID"
              @click.native="LoadTaskDefineIndicator"
              class="filter-item"
              clearable
              filterable
              placeholder="请选择任务定义测量指标"
              style="width: 320px;"
            >
              <el-option v-for="item in taskDefineIndicatorList" :key="item.ID" :label="item.name" :value="item.ID" />
            </el-select>
          </el-form-item>
<!--          -->
          <div style="float: right;margin-bottom: 10px;margin-right: 40px;">
            <el-button type="primary" @click="createData">
              添加
            </el-button>
          </div>
        </el-form>
      </el-scrollbar>
    </div>
    <!--    对话框下方按钮-->
    <div slot="footer" class="dialog-footer">
      <!--    提交按钮-->
      <el-button type="primary" @click="closeDlg">
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { controlAmount, isNotEmpty, zEnBase64 } from '@/utils'
import { getToken } from '@/utils/auth'
import global from '@/common'
import { createTaskDefineIndicator, deleteTaskDefineIndicator } from '@/api/weixing/taskDefineIndicator'
// import { getTaskDefineIndicatorList } from '@/api/base'
import { getTaskDefineIndicatorList } from '@/api/weixing/base'
import { fetchTaskDefineIndicatorOne } from '@/api/weixing/taskDefineIndicator'
import { getChainTaskDefineIndicatorList } from '@/api/base'
import { createChainTaskDefineIndicator, deleteChainTaskDefineIndicator } from '@/api/weixing/chainTaskDefineIndicator'
import option from '@/common/weixing/option'

export default {
  name: 'TaskDefineIndicator',
  props: {
    width: {
      type: String,
      default: '500px'
    },
    height: {
      type: String,
      default: '300px'
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '任务定义测量指标列表'
    },
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      list: null, // 列表数据
      listLoading: true, // 列表状态为加载中
      loadingBtn: false, // 防止表单重复提交
      loadingBtnTitle: '确定', // 提交按钮标题
      listIcon: global.listIcon, // 列表按钮图标
      taskDefineIndicatorList: [],
      linkTypes: option.linkTypes,
      rules: {
        taskDefineIndicatorID: [{ required: true, message: '任务定义测量指标不能为空', trigger: 'blur' }]
      },
      temp: {
        taskDefineIndicatorID: '',
        linkType: ''
      }
    }
  },
  created() {
    console.log(this.row)
    this.getList()
  },
  methods: {
    LoadTaskDefineIndicator() {
      getTaskDefineIndicatorList(
      ).then(response => {
        this.taskDefineIndicatorList = response.body.data.rows
      })
    },
    // 加载列表
    getList() {
      this.listLoading = true
      getChainTaskDefineIndicatorList(
        'chainID=' + this.row.ID,
        'taskDefineIndicator.taskDefineIndicatorID.name').then((response) => {
        this.list = response.body.data.rows
        this.listLoading = false
      })
    },
    // 创建
    createData() {
      alert(this.temp.linkType)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true // 提交按钮不可用
          this.loadingBtnTitle = '提交中...'
          let params = ''
          params += 'applicationID=' + zEnBase64(this.$store.state.user.info.applicationID)
          params += ',organizationID=' + zEnBase64(this.$store.state.user.info.organizationID)
          // if (isNotEmpty(this.row.customerOrganizationID)) { params += ',customerOrganizationID=' + zEnBase64(this.row.customerOrganizationID) }
          if (isNotEmpty(this.row.ID)) { params += ',chainID=' + zEnBase64(this.row.ID) }
          if (isNotEmpty(this.row.stationID)) { params += ',stationID=' + zEnBase64(this.row.stationID) }
          if (isNotEmpty(this.row.name)) { params += ',shortName=' + zEnBase64(this.row.name) }
          if (isNotEmpty(this.row.orderSeq)) { params += ',orderSeq=' + zEnBase64(this.row.orderSeq) }
          if (isNotEmpty(this.temp.linkType)) { params += ',linkType=' + zEnBase64(this.temp.linkType) }
          params += ',taskDefineIndicatorID=' + zEnBase64(this.temp.taskDefineIndicatorID)
          fetchTaskDefineIndicatorOne({ token: getToken(), ID: this.temp.taskDefineIndicatorID }).then(response => {
            params += ',name=' + zEnBase64(response.body.data.name)
            const data = { token: getToken(), parameterArray: params, functionID: global.functionID }
            createTaskDefineIndicator(data).then(response => {
              if (response.header.code === 0) {
                this.getList()
                this.dialogFormVisible = false // 关闭对话框
                this.$notify({ title: '创建成功', message: this.temp.name, type: 'success', duration: global.notify.durationShort })
                this.temp.taskDefineIndicatorID = ''
                this.temp.linkType = ''
              } else {
                this.loadingBtn = false // 提交按钮可用
                this.loadingBtnTitle = '确定'
                this.$notify({ title: '创建失败', message: response.header.msg, type: 'error', duration: global.notify.duration })
              }
            }).catch(err => {
              this.loadingBtn = false // 提交按钮可用
              this.loadingBtnTitle = '确定'
              console.error(err)
            })
          })
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm('是否确认删除 ' + row.name + '?', {
        type: 'warning',
        closeOnClickModal: false, // 点击区域外不可关闭
        closeOnPressEscape: false // 按ESC不可关闭
      }).then(() => {
        const params = { token: getToken(), parameterArray: 'ID=' + row.ID, functionID: global.functionID }
        deleteTaskDefineIndicator(params).then(response => {
          if (response.header.code === 0) {
            this.getList()
            this.$notify({ title: '删除成功', message: row.name, type: 'success', duration: global.notify.durationShort })
          } else {
            this.$notify({ title: '删除失败', message: response.header.msg, type: 'error', duration: global.notify.duration })
          }
        }).catch(err => {
          console.error(err)
        })
      })
    },
    closeDlg() {
      this.visible = false
      this.$parent.taskDefineIndicatorVisible = false
    },
    common_event(event_name, index) {
      if (isNotEmpty(event_name)) {
        this[event_name](index)
      }
    },
    makeFrequency(index) {
      this.$nextTick(() => {
        this.inputList[index].value = controlAmount(this.inputList[index].value)
      })
    }
  }
}
</script>

<style>
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
